6<template>
  <el-row>
    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
    <el-col :span="12"
      ><div class="zhu">
        <div class="right">
          <div class="tm">
            <h1>{{ types.title }}</h1>
          </div>
          <div class="news-detail">
            <div v-html="types.content"></div>
            <el-image class="img" :src="types.img"  />
            <div class="sj">
            <div v-html="types.author"></div>
            <div v-html="types.time"></div>
            </div>
          </div>
        </div></div
    ></el-col>
    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
  </el-row>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      newsId: "",
      types: [],
      content:[],
    };
  },
  mounted() {
    this.newsId = this.$route.params.newsId;
    this.getNewsById(this.newsId);
  },
  methods: {
    getNewsById(newsId) {
      get("/getContent", {
        newsId: newsId,
      }).then((res) => {
        this.types = res.data;
        console.log(this.types);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.right {
  text-align: center;
}
.tm {
  text-align: center;
}
.sj {
  text-align: right;
}
.zhu {
  width: 100%;
}
</style>
